import React from 'react';
import ReactDOM from 'react-dom';
import classNames from 'classnames';
import Dom from '../utils/Dom';
import Icon from '../Icon';

class Dropdown extends React.Component {
    displayName = 'Dropdown';

    static defaultProps= {
        trigger: 'click',
        level: 0
    }

    componentDidMount () {
        this._isMounted = true;
    }

    componentWillUnmount () {
        this._isMounted = false;
    }

    onSelect = (item, level, isLeaf) => {
        if (this.props.onSelect) {
            this.props.onSelect(item, level, isLeaf);
        }
    }

    getLoading () {
        const {size} = this.props;
        const iconSize = 12;
        return <span style={{width: iconSize, height: iconSize}} className='cm-button-loading'>
            <svg xmlns='http://www.w3.org/2000/svg' width={iconSize} height={iconSize} viewBox='0 0 38 38' stroke='#8492A6'>
                <g fill='none' fillRule='evenodd'>
                    <g transform='translate(1 1)' strokeWidth='2'>
                        <circle strokeOpacity='.5' cx='18' cy='18' r='18'/>
                        <path d='M36 18c0-9.94-8.06-18-18-18' transform='rotate(113.635 18 18)'>
                            <animateTransform attributeName='transform' type='rotate' from='0 18 18' to='360 18 18' dur='1s' repeatCount='indefinite'/>
                        </path>
                    </g>
                </g>
            </svg>
        </span>;
    }

    renderDropdown () {
        const {data, active, level, textField, valueField} = this.props;
        let hasChildren = false;
        let children;
        const arr = data && data.map((item, index) => {
            const open = item[valueField] === active[level];
            if (item[valueField] === active[level] && item.children && item.children.length) {
                hasChildren = true;
                children = item.children;
            }
            if (item[valueField] === active[level] && item.danymicData && typeof item.danymicData === 'function') {
                hasChildren = true;
            }
            const clazzName = classNames('cm-cascader-item', {
                'cm-dropdown-item-divided': item.divided,
                'cm-dropdown-item-disabled': item.disabled,
                'cm-cascader-item-active': open
            });
            const branch = item.children && item.children.length || item.danymicData;
            return <li key={item[valueField] || index} className={clazzName} onClick={this.onSelect.bind(this, item, level, !branch)}>
                {item[textField]}
                {
                    branch ? (item.loading ? this.getLoading() : <Icon name='ios-arrow-forward'/>) : null
                }
            </li>;
        });
        return <span style={{whiteSpace: 'nowrap'}}>
            <ul className='cm-cascader-menu'>
                {arr}
            </ul>
            {
                hasChildren && children
                    ? <Dropdown open={hasChildren} level={level + 1} active={active} data={children} trigger='click'
                        onSelect={this.onSelect} textField={textField} valueField={valueField}
                    ></Dropdown>
                    : null
            }
        </span>;
    }

    render () {
        return this.renderDropdown();
    }
}

export default Dropdown;
